<template>
<div>
    <el-dialog 
        title="文件上传" 
        :visible.sync="$store.state.upload_dialog" 
        append-to-body
        width="500px">
        <div class="container">
            <div class="left">
                <div class="top">
                    <Choose_file
                        ref="upload_file"
                        @file_change="on_change">
                    </Choose_file>
                </div>
                <el-form 
                    ref="upload_form" 
                    :model="upload_form" 
                    label-width="80px"
                    label-position="left">
                    <div class="centre">
                        <el-form-item
                            label="文件密级"
                            prop="fileLevel"
                            :rules="[
                                { validator: test_file_level, trigger: 'blur'}, 
                            ]">
                            <el-select 
                                :disabled="type=='md'"
                                v-model="upload_form.fileLevel" 
                                :placeholder="type=='md'?'md文件自动识别密级':'请选择密级'">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="bottom">
                        <el-form-item 
                            label="关键字"
                            prop="fileTag"
                            :rules="[
                                { required: true, message: '不能为空'}, 
                            ]">
                            <el-input v-model="upload_form.fileTag" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <div slot="footer" class="dialog_footer">
            <el-button type="primary" @click="on_upload" :loading="loading">确 定</el-button>
            <el-button @click="on_cancel" type="danger" plain>取 消</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import Choose_file from '@/components/public_cp/choose_file'
export default {   //上传文件对话框
    components:{Choose_file},
    data() {
        return {
            loading:false,
            upload_form:{
                fileLevel:"",
                fileTag:"",
            },
            options: [
                {
                    value: '4',
                    label: '非密',
                }, {
                    value: '3',
                    label: '内部',
                }, {
                    value: '2',
                    label: '秘密',
                },{
                    value: '1',
                    label: '机密',
                },
            ],
            file:null,
            type:null,
        };
    },
    methods: {
        on_change(file){  //文件状态发生改变时的钩子
            this.file = file;
            if(file){
                this.$refs.upload_form.resetFields();
                let names = file.name.split('.');
                this.type = names[names.length-1];
            }
        },
        on_upload(){ //点击加入上传队列方法
            this.$refs.upload_form.validate((valid) => {
                if (valid) {
                    if(this.file){
                        let param = {
                            file:this.file,
                            fileTag:this.upload_form.fileTag,
                        }
                        if(this.type != 'md'){
                            param.fileLevel=this.upload_form.fileLevel;
                        }
                        this.$store.commit('add_upload_file',param);
                        this.$store.commit('set_upload_dialog',false);
                        this.file = null;
                        this.$refs.upload_form.resetFields();
                        this.$refs.upload_file.clear_files();
                    }else{
                        this.$message({
                            message: "请选择文件",
                            offset:65,
                            showClose:true,
                        });
                    }
                } else {
                    return false;
                }
            });
        },
        on_cancel(){
            this.file = null;
            this.$refs.upload_form.resetFields();
            this.$refs.upload_file.clear_files();
            this.$store.commit('set_upload_dialog',false);
        },
        test_file_level(rule, value, callback){ //文件密级输入验证
            if (this.type!='md' && !value) {
                callback(new Error('请选择密级'));
            } else {
                callback();
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.container{
    width:100%;
    display: flex;
    justify-content: space-between;
    height: fit-content;
    margin-bottom: 20px;
    >.left{
        width:100%;
        min-height: 100%;
        >.top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .change_file_bt{
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 15px;
                border-radius: 3px;
                padding: 0 20px;
                line-height: 100%;
                cursor: pointer;
                transition: all 0.2s;
                background-color: #2980ff;
                border-color: #2980ff;
                color: white;
                &:hover{
                    background-color:#2977ea;
                }
                i{
                    margin-right: 10px;
                    font-size: 20px;
                }
            }
        }
        .centre{
            width: 100%;
            margin-bottom: 20px;
            display: flex;
            justify-content:row;
            align-items: center;
            span{
                margin-left: 10px;
                min-width: fit-content;
                font-size: 15px;
                line-height: 100%;
                color: rgb(128, 128, 128);
            }
        }
        .bottom{
            width: 100%;
            display: flex;
            justify-content:row;
            align-items: center;
            span{
                margin-left: 10px;
                min-width: fit-content;
                font-size: 15px;
                line-height: 100%;
                color: rgb(128, 128, 128);
            }
        }
    }
}
/deep/.dialog_footer{
    /deep/button{
        width: 90px;
        height: 35px;
        border-radius: 2px;
    }
}
</style>